<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
    input[type="text"]
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}
input[type="button"]
{
	width:120px;
	margin-left:35px;
	display:block;
}
 a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
    .clearfix {
    overflow: auto;
}
p > i:first-child
{
	color:blue;
} 

.img2 {
    float: right;
}
    img 
{
	float:right;
}
    li {display:inline;}
    h4 {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
body
{
	background-color:#d0e4fe;
}
img
{
  opacity:0.4;
  filter:alpha(opacity=40); 
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); 
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
}
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.center
{
	text-align:center;
}
h1
{
	
    background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}table,th,td
{
	border:1px solid black;
    margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
   
}
p.one 
{
	border-style:groove;
	border-width:5px;
	border-color:#98bf21;
    padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{overflow: auto;
	border-style:solid;
	border-width:1px;
    outline-color: #98bf21;
    outline-width: thick;
    outline-style:dashed ;
}
h5.pos_left
{
	position:relative;
	left:-20px;
}

h5.pos_right
{
	position:relative;
	left:20px;
}
#overflowTest {
    background: #4CAF50;
    color: black;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
h1:before {content:url(link.jpg ) ;

}

</style>
</head>

<body>
    <div class="responsive">
        <div class="img">
          <a target="_blank" href="img_fjords.jpg">
            <img src="//www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
          </a>
          <div class="desc">Add a description of the image here</div>
        </div>
      </div>
      
      
      <div class="responsive">
        <div class="img">
          <a target="_blank" href="img_forest.jpg">
            <img src="//www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
          </a>
          <div class="desc">Add a description of the image here</div>
        </div>
      </div>
      
      <div class="responsive">
        <div class="img">
          <a target="_blank" href="img_lights.jpg">
            <img src="link.jpg" alt="Northern Lights" width="600" height="400">
          </a>
          <div class="desc">Add a description of the image here</div>
        </div>
      </div>
      
      <div class="responsive">
        <div class="img">
          <a target="_blank" href="link.jpg">
            <img src="link.jpg" alt="Mountains" width="600" height="400">
          </a>
          <div class="desc">蜡笔小新</div>
        </div>
      </div>
      
      <div class="clearfix"></div>
      
      <div style="padding:6px;">
        
        
      </div>
    <div>
        该文本插入在 div 元素中。
        <p>该段落有自己的背景颜色。</p>
        我们仍然在同一个 div 中。
        </div>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</h4>
<table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
    </table>
    <p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些<i>haode</i>文本。<img src="link.jpg" width="95" height="84" /></p>
<ul >
    <li id=><a href="https://www.runoob.com/css/css-pseudo-classes.html" target="_blank">HTML</a></li>
    <li id=><a href="/css/" target="_blank">CSS</a></li>
    <li><a href="/js/" target="_blank">JavaScript</a></li>
    <li><a href="/xml/" target="_blank">XML</a></li>
    </ul>
    <h5 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h5 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <div id="overflowTest">
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <img src="link.jpg" width="95" height="84" />
        </div>
        <div class="clearfix">
            <img class="img2" src="link.jpg" alt="link" width="170" height="170">
            菜鸟教程 - 学的不仅是技术，更是梦想！！！</div>
            <ul>
                <li><a href="#home">主页</a></li>
                <li><a href="#news">新闻</a></li>
                <li><a href="#contact">联系</a></li>
                <li><a href="#about">关于</a></li>
                </ul>
                <div class="dropdown">
                    <span>鼠标移动到我这！</span>
                    <div class="dropdown-content">
                      <p>hahaha</p>
                      <p>www.runoob.com</p>
                    </div>
                  </div>
                  <form name="input" action="demo-form.php" method="get">
                    Firstname:<input type="text" name="fname" value="Peter" size="20">
                    Lastname:<input type="text" name="lname" value="Griffin" size="20">
                    <input type="button" value="Example Button">
</body>
</html>
